<template>
  <div>
    <section style="height: 70px"></section>
    <section>
      <div class="container p-5">
        <div class="text-center">
          <el-button link @click="showLogin" :style="{ color: isLogin ? 'red' : '' }"
            >登录</el-button
          >
          <el-button
            link
            @click="showRegister"
            :style="{ color: isRegister ? 'red' : '' }"
            >注册</el-button
          >
          <div>
            <div style="margin: 0 auto; width: 40%">
              <el-card v-show="isLogin"  class="mt-5">
                <el-form label-position="top" label-width="100px" :model="state.loginForm">
                  <el-form-item label="账号">
                    <el-input v-model="state.loginForm.username" placeholder="请输入账号" />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input  type="password"  show-password placeholder="请输入密码" v-model="state.loginForm.password" />
                  </el-form-item>
                  <el-form-item label="">
                    <el-button @click="loginBtn" type="success" style="width: 100%">登录</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              <el-card v-show="isRegister" class="mt-5">
                <el-form label-position="top" label-width="100px" :model="state.registerForm">
                  <el-form-item label="账号">
                    <el-input v-model="state.registerForm.username"  placeholder="请输入账号" />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="state.registerForm.password" type="password"  show-password placeholder="请输入密码" />
                  </el-form-item>
                  <el-form-item label="手机">
                    <el-input v-model="state.registerForm.phone" placeholder="请输入手机" />
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="state.registerForm.email" placeholder="请输入邮箱" />
                  </el-form-item>
                  <el-form-item label="">
                    <el-button @click="RegisterBtn"  type="primary" style="width: 100%">注册</el-button>
                  </el-form-item>
                </el-form>
                </el-card>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, defineEmits } from "vue";
import { ShoppingCartFull } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import router from "../../router";
import request from "../../api/request";
import { useUserCounterStore } from "../../store/oneselfInfo";
import { storeToRefs } from "pinia";
const route = useRoute();
const multipleTableRef = ref([]);
const isLogin = ref(true);
const isRegister = ref(false);
const showLogin = () => {
  isLogin.value = true;
  isRegister.value = false;
};
const showRegister = () => {
  isLogin.value = false;
  isRegister.value = true;
};
const state = reactive({
  loginForm: {
    username: '',
    password: ''
  },
  registerForm: {
    username: '',
    password: '',
    phone: '',
    email: '',
  }
});
const store = useUserCounterStore();
const loginBtn = () =>{

    if(state.loginForm.username == '' ){
        ElMessage({
            type: "error",
            message: "账号不能为空",
          });
        return
    }
    if(state.loginForm.password == ''){
        ElMessage({
            type: "error",
            message: "密码不能为空",
          });
        return
    }
    request.post("/customer/login", state.loginForm).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: res.msg,
          });
          store.login(res.data)
          if (route.query.params) {
            router.push("/" + route.query.params);
          } else {
            router.push("/customerCenter");
          }
        }else{
            ElMessage({
            type: "error",
            message: res.msg,
          });
        }
      });
}
const RegisterBtn = () =>{
    if(state.registerForm.username == '' ){
        ElMessage({
            type: "error",
            message: "账号不能为空",
          });
        return
    }
    if(state.registerForm.password == ''){
        ElMessage({
            type: "error",
            message: "密码不能为空",
          });
        return
    }
    //手机格式
    let mobilePhone = /^1[3|4|5|7|8|9]\d{9}$/
    //邮箱格式
    let mobileEmail = /^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$/
    if(!mobilePhone.test(state.registerForm.phone)){
      ElMessage({
            type: "error",
            message: "手机格式错误",
          });
        return
    }
    if(!mobileEmail.test(state.registerForm.email)){
      ElMessage({
            type: "error",  
            message: "邮箱格式错误",
          });
        return
    }
    request.post("/customer/add", state.registerForm).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: res.msg,
          });
          showLogin()
        }else{
            ElMessage({
            type: "error",
            message: res.msg,
          });
        }
      });
}

const { cartList } = storeToRefs(store);
</script>
<style scoped lang="scss"></style>
